<template>
    <el-dialog :close-on-click-modal="false" title="查看模板" :visible.sync="visible" width="1060px" top="5%">
        <el-form ref="dataForm" label-position="right" label-width="80px" :model="form" :rules="rules" inline style="width: 990px; margin-lef:15px;">
            <el-form-item label="模板编码" prop="queryCode" required>
                <el-input v-model.trim="form.queryCode" size="small" style="width:100%" />
            </el-form-item>
            <el-form-item label="模板名称" prop="queryName">
                <el-input v-model.trim="form.queryName" size="small" style="width:100%" />
            </el-form-item>
            <el-form-item label="模板类型" prop="templateType">
                <el-radio v-model="form.templateType" :label="1" style="margin-right:10px">公司模板</el-radio>
                <el-radio v-model="form.templateType" :label="2">个人模板</el-radio>
            </el-form-item>
            <el-form-item label="模板说明" prop="remarks">
                <el-input v-model.trim="form.remarks" size="small" style="width:100%" />
            </el-form-item>
            <el-form-item label="顺序号" prop="seq">
                <el-input v-model.trim="form.seq" size="small" maxLength="2" style="width:100%" />
            </el-form-item>
            <el-form-item label="统计表类型" prop="groupDateType" label-width="100px">
              <el-select v-model="form.groupDateType" placeholder="统计表类型" size="small">
                <el-option v-for="item in methodList" :key="item.val" :label="item.label" :value="item.val" />
              </el-select>
            </el-form-item>
            <el-form-item label="品类级次" prop="seq">
              <el-select v-model="form.invCatgLevel" placeholder="品类级次" size="small">
                <el-option label="一级" value="1" />
                <el-option label="二级" value="2" />
                <el-option label="三级" value="3" />
                <el-option label="四级" value="4" />
                <el-option label="五级" value="5" />
                <el-option label="末级" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="一级汇总" prop="param1">
              <el-select v-model="form.param1" style="width:98px" placeholder="五级汇总" size="small">
                <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="二级汇总" prop="seq">
              <el-select v-model="form.param2" style="width:98px" placeholder="五级汇总" size="small">
                <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="三级汇总" prop="seq">
              <el-select v-model="form.param3" style="width:98px" placeholder="五级汇总" size="small">
                <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="四级汇总" prop="seq">
              <el-select v-model="form.param4" style="width:113px" placeholder="五级汇总" size="small">
                <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="五级汇总" prop="seq">
              <el-select v-model="form.param5" style="width:113px" placeholder="五级汇总" size="small">
                <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="标题样式" label-width="88px" prop="titleFontStyle">
                <span>字体</span>
                <el-select v-model.number="form.titleFontStyle" size="small" placeholder="选择" style="width:70px">
                    <el-option v-for="item in fontStyles" :key="item.val+'aaa'" :label="item.name" :value="item.val" />
                </el-select>
                <span style="margin-left:3px">字号</span>
                <el-input v-model.number="form.titleFontSize" size="small" maxLength="2" style="width:67px" />
                <span style="margin-left:3px">行高</span>
                <el-input v-model.number="form.titleHigh" size="small" maxLength="2" style="width:67px" />
            </el-form-item>
            <el-form-item label="报表头样式" label-width="88px" prop="headerFontStyle">
                <span>字体</span>
                <el-select v-model.number="form.headerFontStyle" size="small" placeholder="选择" style="width:70px">
                    <el-option v-for="item in fontStyles" :key="item.val+'bbb'" :label="item.name" :value="item.val" />
                </el-select>
                <span style="margin-left:3px">字号</span>
                <el-input v-model.number="form.headerFontSize" size="small" maxLength="2" style="width:67px" />
                <span style="margin-left:3px">行高</span>
                <el-input v-model.number="form.headerHigh" size="small" maxLength="2" style="width:67px" />
            </el-form-item>
            <el-form-item label="报表尾样式" label-width="88px" prop="footerFontStyle">
                <span>字体</span>
                <el-select v-model.number="form.footerFontStyle" size="small" placeholder="选择" style="width:70px">
                    <el-option v-for="item in fontStyles" :key="item.val+'ccc'" :label="item.name" :value="item.val" />
                </el-select>
                <span style="margin-left:3px">字号</span>
                <el-input v-model.number="form.footerFontSize" size="small" maxLength="2" style="width:67px" />
                <span style="margin-left:3px">行高</span>
                <el-input v-model.number="form.footerHigh" size="small" maxLength="2" style="width:67px" />
            </el-form-item>
            <el-form-item label="表格头样式" label-width="88px" prop="tableHeaderFontStyle">
                <span>字体</span>
                <el-select v-model.number="form.tableHeaderFontStyle" size="small" placeholder="选择" style="width:70px">
                    <el-option v-for="item in fontStyles" :key="item.val+'ddd'" :label="item.name" :value="item.val" />
                </el-select>
                <span style="margin-left:3px">字号</span>
                <el-input v-model.number="form.tableHeaderFontSize" size="small" maxLength="2" style="width:67px" />
                <span style="margin-left:3px">行高</span>
                <el-input v-model.number="form.tableHeaderHigh" size="small" maxLength="2" style="width:67px" />
            </el-form-item>
            <el-form-item label="表格体样式" label-width="88px" prop="contentFontStyle">
                <span>字体</span>
                <el-select v-model.number="form.contentFontStyle" size="small" placeholder="选择" style="width:70px">
                    <el-option v-for="item in fontStyles" :key="item.val+'eee'" :label="item.name" :value="item.val" />
                </el-select>
                <span style="margin-left:3px">字号</span>
                <el-input v-model.number="form.contentFontSize" size="small" maxLength="2" style="width:67px" />
                <span style="margin-left:3px">行高</span>
                <el-input v-model.number="form.contentHigh" size="small" maxLength="2" style="width:67px" />
            </el-form-item>
            <el-form-item label="横向打印每页表体行数" prop="printPageLineSize1" label-width="160px">
                <el-input v-model.number="form.printPageLineSize1" size="small" maxLength="2" style="width:60px" />
            </el-form-item>
            <el-form-item label="纵向打印每页表体行数" prop="printPageLineSize2" label-width="160px">
                <el-input v-model.number="form.printPageLineSize2" size="small" maxLength="2" style="width:60px" />
            </el-form-item>
            <el-form-item label="报表的表头单位" prop="currencyUnit" label-width="110px" style="margin-right:250px">
                <el-input v-model.number="form.currencyUnit" size="small" maxLength="2" style="width:100px" />
            </el-form-item>
            <el-form-item label="打印表头" prop="printTitlePerPage" label-width="70px">
                <el-checkbox v-model="form.printTitlePerPage" :false-label="0" :true-label="1" />
            </el-form-item>
            <el-form-item label="显示合计" prop="rollUp" label-width="70px">
                <el-checkbox v-model="form.rollUp" :false-label="0" :true-label="1" />
            </el-form-item>
            <el-form-item label="横向打印" prop="rotate">
                <el-checkbox v-model="form.rotate" :false-label="0" :true-label="1" />
            </el-form-item>
            <el-form-item label="默认" prop="isDefault" label-width="50px">
                <el-checkbox v-model="form.isDefault" :false-label="0" :true-label="1" />
            </el-form-item>
            <el-form-item label="禁用" prop="isDisabled" label-width="70px">
                <el-checkbox v-model="form.isDisabled" :false-label="0" :true-label="1" />
            </el-form-item>
        </el-form>
        <el-table ref="table" :data="tableData" border size="small" fit highlight-current-row style="width: 100%;">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="名称" prop="label">
                <template slot-scope="{row}">
                    <input v-model="row.label" type="text" class="inputCell tx-c">
                </template>
            </el-table-column>
            <el-table-column label="小数点位" prop="scale">
                <template slot-scope="{row}">
                    <input v-model="row.scale" type="text" class="inputCell tx-c">
                </template>
            </el-table-column>
            <el-table-column label="小数舍弃" prop="isDecimalZeroDown" align="center">
                <template slot-scope="{row}">
                    <el-checkbox v-model="row.isDecimalZeroDown" :false-label="0" :true-label="1" />
                </template>
            </el-table-column>
            <el-table-column label="打印千分位" prop="isThousandthPDF" align="center">
                <template slot-scope="{row}">
                    <el-checkbox v-model="row.isThousandthPDF" :false-label="0" :true-label="1" />
                </template>
            </el-table-column>
            <el-table-column label="导出千分符" prop="isThousandthXLS" align="center">
                <template slot-scope="{row}">
                    <el-checkbox v-model="row.isThousandthXLS" :false-label="0" :true-label="1" />
                </template>
            </el-table-column>
            <el-table-column label="打印0转空白" prop="isThousandthPDF" align="center">
                <template slot-scope="{row}">
                    <el-checkbox v-model="row.isBlankIfZeroPDF" :false-label="0" :true-label="1" />
                </template>
            </el-table-column>
            <el-table-column label="导出0转空白" prop="isThousandthXLS" align="center">
                <template slot-scope="{row}">
                    <el-checkbox v-model="row.isBlankIfZeroXLS" :false-label="0" :true-label="1" />
                </template>
            </el-table-column>
            <el-table-column label="单位" prop="currencyUnit">
                <template slot-scope="{row}">
                    <input v-model="row.currencyUnit" type="text" class="inputCell tx-c">
                </template>
            </el-table-column>
            <el-table-column label="输出比率" prop="ratio">
                <template slot-scope="{row}">
                    <input v-model="row.ratio" type="text" class="inputCell tx-c">
                </template>
            </el-table-column>
            <el-table-column label="对齐方式" prop="align">
                <template slot-scope="{row}">
                <el-select v-model="row.align" size="small" placeholder="选择" style="width:70px">
                    <el-option label="左" :value="0" />
                    <el-option label="中" :value="1" />
                    <el-option label="右" :value="2" />
                </el-select>
                </template>
            </el-table-column>
            <el-table-column label="单元格宽" prop="width">
                <template slot-scope="{row}">
                    <input v-model="row.width" type="text" class="inputCell tx-c">
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer" align="center">
            <el-button type="default" @click="$emit('update:dialogvisible', false)">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'saveSelect',
    props: ['dialogvisible', 'type', 'levellist', 'params'],
    data() {
        return {
            visible: false,
            tableData: [],
            fontStyles: [{ name: '普通', val: 0 }, { name: '粗体', val: 1 }, { name: '斜体', val: 2 }, { name: '粗斜', val: 3 }, { name: '下划线', val: 4 }],
            methodList: [{ label: '日报', val: 'day' }, { label: '周报', val: 'week' }, { label: '旬报', val: 'tendays' }, { label: '月报', val: 'month' }, { label: '季报', val: 'quarter' }],
            form: {
                queryCode: '',
                queryName: '',
                templateType: 1,
                groupDateType: 'day',
                invCatgLevel: '1',
                param5: '业务员',
                param4: '客户',
                param3: '商品',
                param2: '品类',
                param1: '日期',
                rotate: 0,
                rollUp: 1,
                remarks: '',
                seq: '',
                isDisabled: 0,
                isDefault: 1,
                titleFontStyle: 0,
                titleFontSize: 14,
                titleHigh: 15,
                headerFontStyle: 0,
                headerFontSize: 10,
                headerHigh: 15,
                footerFontStyle: 0,
                footerFontSize: 14,
                footerHigh: 15,
                tableHeaderFontStyle: 0,
                tableHeaderFontSize: 10,
                tableHeaderHigh: 15,
                contentFontStyle: 0,
                contentFontSize: 8,
                contentHigh: 15,
                printTitlePerPage: 1,
                currencyUnit: '',
                printPageLineSize1: 30,
                printPageLineSize2: 40
            },
            rules: {
                queryCode: [{ required: true, trigger: 'blur', message: '模板编码不能为空' }],
                queryName: [{ required: true, trigger: 'blur', message: '模板名称不能为空' }],
                templateType: [{ required: true, trigger: 'blur', message: '请选择模板类型' }],
                remarks: [{ required: true, trigger: 'blur', message: '模板说明不能为空' }]
            }
        }
    },
    watch: {
        dialogvisible(val) {
            if (val) {
                this.visible = true
                this.form.status = '1'
                this.form = this.params
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            } else {
                this.visible = false
            }
        },
        visible(val) {
            this.$emit('update:dialogvisible', val)
        }
    },
    methods: {
        save() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const obj = this.form
                    obj.columnVOList = this.tableData
                    this.$emit('saveTemplate', obj)
                }
            })
        }
    }
}
</script>
<style scoped>
.subtit {
    display: inline-block;
    width: 60px;
    line-height: 40px
}

.message-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    padding-right: 8px;
}
</style>
<style lang="scss" scoped>
>>>.el-dialog__body {
    padding-bottom: 20px !important
}
/deep/ .el-form-item {
    margin-bottom: 16px;
}
</style>